<!doctype html>
<html lang="zh">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1" name="viewport">

	<!-- Bootstrap CSS -->
	<link crossorigin="anonymous" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/css/bootstrap.min.css"
		rel="stylesheet">
	<link href="https://cdn.staticfile.org/bootswatch/5.1.3/darkly/bootstrap.min.css"
		media="(prefers-color-scheme: dark)" rel="stylesheet" />
	<title>个人战绩</title>
	<style>
		#chart_rader {
			height: 195px;
		}

		#chart_pie {
			height: 195px;
		}

		#chart_line {
			height: 110px;
		}

		#qqHead {
			height: 140px;
			width: 140px;
		}

		#qqHead2 {
			height: 140px;
			width: 140px;
		}

		body,
		input,
		textarea,
		option,
		select {
			font-family: -apple-system, BlinkMacSystemFont,
				"Microsoft JhengHei", "Meiryo",
				"Malgun Gothic", "tahoma", "Dotum",
				"MS PGothic", "PMingLiu", system,
				system-ui, "Apple Color Emoji",
				"Segoe UI Emoji", "Segoe UI Symbol",
				sans-serif;
		}

		body {
			background-color: rgb(108, 117, 125);
		}

		@media (prefers-color-scheme: dark) {
			body {
				background-color: #111;
			}
		}
	</style>
</head>

<body class="my-3">
	<div class="container">
		<div class="card shadow-lg">
			<div class="row d-sm-none justify-content-center align-items-center text-center">
				<div class="col-auto">
					<a class="py-1" href="#" id="head_input2"></a>
				</div>
				<div class="col-auto">
					<h3 class="card-title mb-0" id="userName2"></h3>
					<span class="badge bg-primary" id="level2"></span>
					<span class="badge bg-secondary">R<span id="rate2">1500</span></span>
					<br>
					<span class="badge bg-secondary rounded-pill" id="club2"></span><br>
				</div>
			</div>

			<div class="row align-items-center">
				<div class="col-sm-4 col-6">
					<div class="ps-4">
						<span class="json_text badge bg-secondary" id="areaName"></span>
						<br>
						<span class="json_text badge bg-secondary d-none d-sm-inline-block" id="club"></span>
						<br class="d-none d-sm-inline-block">

						<span class="d-inline-block">全国排行#</span><span class="json_text" id="rank"></span><br>

						<span class="d-inline-block">雀庄内排行#</span><span class="json_text" id="areaRank"></span><br>

						<span class="d-inline-block">总对局数</span>
						<span class="json_text" id="totalCount"></span><br>

						<span class="d-inline-block">飞人吃一</span>
						<span class="json_text" id="killCount"></span>
					</div>
				</div>

				<div class="col-4 text-center d-none d-sm-block">
					<a class="py-1 d-block" href="#" id="head_input"></a>
					<span class="json_text" id="userName"></span>
					<br>
					<span class="badge bg-primary" id="level"></span>
					<span class="badge bg-secondary">R<span class="json_text" id="rate"></span></span>
				</div>
				<div class="col-sm-4 col-6 text-end">
					<div class="pe-4">
						<span class="d-inline-block">最高点<span class="d-none d-sm-inline-block">数</span></span>
						<span class="json_text" id="maxPoint"></span><br>

						<span class="d-inline-block">平均点<span class="d-none d-sm-inline-block">数</span></span>
						<span class="json_text" id="pointAvg"></span><br>

						<span id="percent"></span><br>

						<span class="d-inline-block"><span class="d-none d-sm-inline-block">升段</span>局数≥<span
								id="lv_count"></span></span>
						(<span class="json_text" id="currentCount"></span>)<br>

						<span class="d-inline-block"><span class="d-none d-sm-inline-block">升段</span>均顺≤<span
								id="lv_avg"></span></span>
						(<span class="json_text" id="currentAvg"></span>)<br>
						<span class="d-inline-block">顺位之和≤<span id="lv_sum"></span></span>
						(<span id="currentSum"></span>)<br>
						<span class="d-none">
							<span class="d-inline-block">通算<span class="d-none d-sm-inline-block">得点</span></span>
							<small id="totalScore"></small>
						</span>

					</div>
				</div>
			</div>

			<div class="row align-items-center">
				<div class="col-md-6" id="chart_rader"></div>
				<div class="col-md-6" id="chart_pie"></div>
			</div>
			<small class="text-center text-muted">
				<span class="badge bg-secondary rounded-pill" id="lvup">最近顺位</span>
				<span class="text-break text-wrap" id="logs"></span>
			</small>
			<div id="chart_line"></div>

			<div class="card-footer text-muted text-center">
				https://rate.000.mk
				<span class="d-none d-sm-inline-block">雀庄公式战</span>
				<small id="now">2021-12-28 12:12</small>
			</div>
		</div>
	</div>
	<script src="../js/data_list.js"></script>
	<script crossorigin="anonymous"
		src="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
	<script crossorigin="anonymous" src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
	<script>
		if (window.location.origin === "http://bot0.000.mk") {
			window.apiurl = "http://bot0.000.mk";
		} else {
			window.apiurl = "https://cdn.r-mj.com";
		}
		window.step_count = 0;
		function step() {
			console.log(window.step_count);
			if (window.step_count === 2) {
				generateCharts();
			}
		}

		(function () {
			var today = new Date();
			var y = today.getFullYear();
			var m = today.getMonth() + 1;
			var d = today.getDate();
			var h = today.getHours();
			var minutes = today.getMinutes();
			m = m < 10 ? '0' + m : m;
			d = d < 10 ? '0' + d : d;
			h = h < 10 ? '0' + h : h;
			minutes = minutes < 10 ? '0' + minutes : minutes;
			document.getElementById("now").innerText = y + "-" + m + "-" + d + ' ' + h + ":" + minutes;
		})()
		function fetch_json(url) {
			fetch(url)
				.catch(error => alert('抓取失败，请刷新'))
				.then((response) => response.json())
				.then((json) => {
					window.json_version = parseInt(json['version']);
					console.log('fetch rank.json');
					window.uin2data = {};
					window.name2uin = {};
					window.rank_lv = [[], [], [], [], [], [],
					[], [], [], [], [], [], [], [], [], []];
					window.players = json["data"].length;
					for (let i = 0; i < window.players; i++) {
						const ele = json["data"][i];
						window.uin2data[ele[0]] = ele;
						window.rank_lv[ele[7]].push(parseInt(ele[6]));
						if (!window.name2uin.hasOwnProperty(ele[1])) {
							window.name2uin[ele[1]] = {};
						}
						window.name2uin[ele[1]][ele[2]] = ele[1];
					}
					window.step_count++;
					step();
				});
		}
		function fetch_version(data_version) {
			console.log('select api url')
			window.data_version = data_version;
			fetch('https://direct.r-mj.com/cache/test.json')
				.catch(error => {
					fetch_json('https://cf.lietxia.bid/cache/rank.json?' + data_version);
				})
				.then((response) => response.json())
				.then((json) => {
					if (json.hasOwnProperty("test")) {
						fetch_json('https://direct.r-mj.com/cache/rank.json?' + data_version);
					} else {
						fetch_json('https://cf.lietxia.bid/cache/rank.json?' + data_version);
					}
				});
		}
		var script = document.createElement('script');
		script.src = window.apiurl + "/nocache/rank_version.js?" + Math.random();
		document.body.appendChild(script);
		fetch(window.apiurl + "/r/chart2.php" + window.location.search)
			.catch(error => alert("fetch失败"))
			.then((response) => response.json())
			.then((json) => {
				console.log('fetch chart2.php');
				if (json.code == 0 && json.hasOwnProperty("msg")) {//成功
					if (json.msg === '需要参数') {
						var userName = prompt('请输入选手昵称');
						return window.location.search = "name=" + userName;
					}
					return alert(json.msg);
				}
				if (json.code == 1) {//成功
					window.uins = json['uin'];
					window.step_count++;
					step();
					return;
				}

				if (json.code == 2) {//多重
					var number = prompt(json.msg, 1);
					if (number > 0) {
						return window.location.search += "&area=" + number;
					} else {
						return alert('错误的输入')
					}
				}
				return alert("找不到此选手");
			});
		function image_loaded() {
			var span = document.createElement('span');
			span.id = 'image_loaded';
			document.body.append(span);
		}

		function generateCharts() {
			window.user = null;
			console.log(window.uins);
			for (var i = 0; i < window.uins.length; i++) {
				if (window.uin2data.hasOwnProperty(window.uins[i])) {
					window.user = window.uin2data[window.uins[i]];
					break;
				}
			}
			var user = window.user;
			console.log('user', user);
			var total_count = user[19] + user[20] + user[21] + user[22];
			var avg1 = user[19] == 0 ? 0 :
				Math.round(user[13] / user[19] * 100);
			var avg2 = user[20] == 0 ? 0 :
				Math.round(user[14] / user[20] * 100);
			var avg3 = user[21] == 0 ? 0 :
				Math.round(user[15] / user[21] * 100);
			var avg4 = user[22] == 0 ? 0 :
				Math.round(user[16] / user[22] * 100);

			// ($user["c4"] <= 5 || $user['fly'] == 0) ? 1 : //不飞率
			// 	round(1 - ($user['fly'] / $user["c4"]), 4),

			var nofly = (user[22] <= 5 || user[9] == 0) ? 1
				: 1 - (user[9] / user[22]);
			// var current_avg = 0;
			// for (let i = 0; i < user[10].length; i++) {
			// 	current_avg += parseInt(user[10][i]);
			// }
			// console.log('c avg/user10',current_avg, user[10]);
			var current_count = user[11].length;
			var current_avg = 0;
			for (var i = 0; i < current_count; i++) {
				current_avg += parseInt(user[11][i]);
			}
			current_avg = current_count == 0 ? 0
				: Math.round(current_avg / current_count * 100) / 100;
			var recent = [];
			for (let i = 0; i < user[12].length; i++) {
				recent[i] = user[12][i] * 100;
			}
			/*
			$row["uid"], $row["name"], $row["cid"],
			$row["qq"], $rank_all, $rank_shop[$row["cid"]],
			$row["r"], $row["lv"], $row["kill_count"],
			$row["fly"], $row["avg10"], $row["rank_arr"],
			$row["pt_arr"],
			$row["pt_sum1"], $row["pt_sum2"],
			$row["pt_sum3"], $row["pt_sum4"],
			$row["pt_max"], $row["pt_min"],
			$row["c1"], $row["c2"], $row["c3"], $row["c4"],
			$row["lv_up"]
			*/
			var levelConfig = [
				['新人', 7, 2.9, 20],
				['五级', 7, 2.8, 19],
				['四级', 10, 2.7, 27],
				['三级', 10, 2.7, 27],
				['二级', 12, 2.6, 31],
				['一级', 16, 2.6, 41],
				['初段', 16, 2.5, 40],
				['二段', 20, 2.5, 50],
				['三段', 25, 2.4, 60],
				['四段', 25, 2.4, 60],
				['五段', 30, 2.3, 69],
				['六段', 40, 2.1, 84],
				['七段', 45, 2.0, 90],
				['八段', 50, 1.9, 95],
				['九段', 10, 0, 0],
				['十段', 10, 0, 0]
			];
			window.lvup = "最近顺位";
			for (let i = 0; i < user[23].length; i++) {
				var date = new Date(1000 * user[23][i]);
				window.lvup = levelConfig[12 + i][0] + '@' + date.getUTCFullYear()
					+ '-' + (date.getUTCMonth() + 1)
					+ '-' + date.getUTCDate();
			}
			var jsonData = {
				"pt1": avg1,
				"pt2": avg2,
				"pt3": avg3,
				"pt4": avg4,
				"fly": user[9],
				"c1": user[19],
				"c2": user[20],
				"c3": user[21],
				"c4": user[22],
				"rate": user[6] / 1000,
				"rank": user[4],
				"areaRank": user[5],
				"pointAvg": total_count == 0 ? 0
					: Math.round((user[13] + user[14]
						+ user[15] + user[16])
						/ total_count * 100),
				"recentScore": user[10],
				"logs": user[11],
				//"totalScore": -34.6,
				"currentCount": current_count,
				"currentAvg": current_avg,
				"recent": recent,
				"killCount": user[8],
				"maxPoint": user[17] * 100,
				"level": user[7],
				"totalCount": total_count,
				"area": user[2],
				"percent": Math.round(
					(1 - user[4] / window.players) * 100),
				"radar": [
					avg1,
					nofly,
					total_count == 0 ? 0
						: (user[19] + user[20]) / total_count,
					user[10],
					user[6] / 1000,
					total_count == 0 ? 0
						: user[19] / total_count,
				],
				"pie": [
					{
						"value": user[19],
						"name": "一位\n均点\n" + avg1
					},
					{
						"value": user[20],
						"name": "二位\n均点\n" + avg2
					},
					{
						"value": user[21],
						"name": "三位\n均点\n" + avg3
					},
					{
						"value": user[22],
						"name": "四位\n均点\n" + avg4
					}
				],
				"uid": user[0],
				"qq": user[3],
				"userName": user[1],
				"club": cid2name[user[2]],
				"areaName": cid2area[user[2]],
			};
			console.log(jsonData)
			//	cid2name[row['cid']] = row['name'];
			//  cid2area[row['cid']] = row['area_name'];
			if (jsonData.radar[0] == 0) { //火力怪异现象
				jsonData.radar[0] = null;
			}
			var lv_rank_index = window.rank_lv[jsonData.level].indexOf(parseInt(user[6]));
			var lv_string = levelConfig[jsonData.level][0];
			if (lv_rank_index >= 0) { lv_string += "#" + (lv_rank_index - -1); }
			var img = document.createElement('img');
			img.id = 'qqHead';
			if (jsonData.level == 15) {
				document.getElementById('head_input').className = "py-0 my-0 d-block";
				document.querySelector("body > div > div > div:nth-child(2) > div.col-4.text-center.d-none.d-sm-block > br").remove();
				document.getElementById('userName').remove();
				img.setAttribute('src', "10.png");
				img.setAttribute('style', "width:95%;height:auto;");

				document.getElementById('level').innerText = "马达 十段";
			} else {
				img.setAttribute('src', "https://q1.qlogo.cn/g?b=qq&s=640&nk=" + jsonData.qq);
				img.setAttribute('class', "img-thumbnail rounded-circle shadow-sm");

				document.getElementById('level').innerText = lv_string;
			}

			img.setAttribute('onload', 'image_loaded()');
			document.getElementById('head_input').appendChild(img);
			document.getElementById('head_input').setAttribute('href', '../rival.html#/' + jsonData.uid + '/' + jsonData.userName);

			var img = document.createElement('img');
			img.id = 'qqHead2';
			img.setAttribute('src', "https://q1.qlogo.cn/g?b=qq&s=640&nk=" + jsonData.qq);
			img.setAttribute('class', "img-thumbnail rounded-circle shadow-sm");
			document.getElementById('head_input2').appendChild(img);
			document.getElementById('head_input2').setAttribute('href', '../rival.html#/' + jsonData.uid + '/' + jsonData.userName);
			document.getElementById('rate2').innerText = jsonData.rate;
			document.getElementById('userName2').innerText = jsonData.userName;
			document.getElementById('club2').innerText = jsonData.club;
			document.getElementById('level2').innerText = lv_string;
			document.getElementById('lv_count').innerText = levelConfig[jsonData.level][1];
			document.getElementById('lv_avg').innerText = levelConfig[jsonData.level][2];
			document.getElementById('lv_sum').innerText = levelConfig[jsonData.level][3];
			document.getElementById('lvup').innerText = window.lvup;
			var c_sum = 0;
			if (jsonData.currentAvg > 0) {
				for (let i = 0; i < jsonData['logs'].length; i++) {
					c_sum += jsonData['logs'][i];
				}
			}

			document.getElementById('currentSum').innerText = c_sum;
			if (jsonData.percent == 100) {
				jsonData.percent = 99.9;
			}
			document.getElementById('percent').innerText =
				(jsonData.totalCount == 0 || jsonData.percent <= 10)
					? '未来可期的雀士' : '打败' + jsonData.percent + '%雀士';
			document.getElementById('currentAvg').className +=
				(jsonData.currentAvg <= levelConfig[jsonData.level][2]) ?
					' text-success' : ' text-danger';
			document.getElementById('currentSum').className +=
				(c_sum <= levelConfig[jsonData.level][3]) ?
					' text-success' : ' text-danger';

			var str = '', logs = jsonData['logs'];
			for (var i = 0; i < logs.length; i += 5) {
				str += logs.slice(i, i + 5).join('') + ' ';
			}
			if (i % 5 > 0) {
				str += logs.slice(0 - (i % 5)).join('');
			}

			document.getElementById('logs').innerText = str;
			var totalScore = document.getElementById('totalScore');
			if (jsonData['totalScore'] >= 0) {//text-success
				totalScore.innerText = '+' + jsonData['totalScore'];
				totalScore.className = 'text-success';
			} else {
				totalScore.innerText = jsonData['totalScore'];
				totalScore.className = 'text-danger';
			}
			var myClass = document.getElementsByClassName("json_text");
			for (let i = 0; i < myClass.length; i++) {
				const element = myClass[i];
				element.innerText = jsonData[element.id];
			}
			if (jsonData.currentCount >= levelConfig[jsonData.level][1]) {
				document.getElementById('currentCount').className += ' text-success';
				document.getElementById('currentCount').innerText = '完成';
			} else {
				document.getElementById('currentCount').className += ' text-danger';
			}
			var myChart = echarts.init(document.getElementById("chart_rader"));
			var myChart2 = echarts.init(document.getElementById("chart_line"));
			var myChart3 = echarts.init(document.getElementById("chart_pie"));
			var app = {};
			var option = {
				legend: { show: false },
				tooltip: { show: true, },
				animation: false,
				radar: {
					// shape: 'circle',
					indicator: [
						{ name: '火力 (一位时平均点数)', max: 47000, min: 35000 },
						{ name: '防守 (不飞率)', max: 0.9, min: 0.3 },
						{ name: '稳定 (连对率)', max: 0.6 },
						{ name: '运势 (近十战平均顺位)', max: 2.8 },
						{ name: '技术 (Rate)', max: 1800, min: 1300 },
						{ name: '进攻 (一位率)', max: 0.35 }
					],
					//center: ['25%', '50%'],
					radius: "65%",
					axisName: {
						fontSize: 13,
						color: "#222",
						borderRadius: 10,
						padding: [2, 6],
						backgroundColor: "rgba(255,255,255,0.5)"
					},
				},
				series: [
					{
						type: 'radar',
						symbolSize: 6,
						data: [
							{
								value: jsonData.radar,
								areaStyle: {
									color: '#66ccff'
								}
							}
						]
					},
				]
			};
			var option3 = {
				legend: { show: false },
				tooltip: { show: true, },
				animation: false,
				series: [
					{
						//center: ['70%', '50%'],
						type: 'pie',
						radius: ['35%', '70%'],
						itemStyle: {
							borderRadius: 5,
							borderColor: "rgba(255,255,255,0.5)",
							borderWidth: 3
						},
						label: {
							show: true,
							color: "#222",
							borderRadius: 8,
							padding: 3,
							fontSize: 13,
							backgroundColor: "rgba(255,255,255,0.5)",
							formatter: '{d}%\n{c}回{b}'
						},
						labelLine: {
							length: 10,
							length2: 15,
							lineStyle: {
								width: 2
							}
						},
						data: jsonData.pie
					},

				]
			};

			var option2 = {
				legend: {
					show: false
				},
				tooltip: { show: true, },
				animation: false,
				grid: {
					left: '7%',
					right: '7%',
					top: '5%',
					bottom: 0,
					containLabel: true
				},
				xAxis: {
					type: 'category',
					show: false,
					boundaryGap: false
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							color: 'rgba(128,128,128,0.3)'
						}
					}
				},
				series: [
					{
						data: jsonData.recent,
						type: 'line',
						symbol: 'circle',
						symbolSize: 5,
						smooth: true,
						areaStyle: {
							opacity: 0.7,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgb(128, 255, 165)'
								},
								{
									offset: 1,
									color: 'rgb(1, 191, 236)'
								}
							])
						},
					}
				]
			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
				myChart2.setOption(option2);
				myChart3.setOption(option3);
				window.onresize = function () {
					myChart.resize();
					myChart2.resize();
					myChart3.resize();
				};
			}
		}


	</script>
</body>

</html>